<template>
  <div ref="bar" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'Bar',
  data() {
    return {
      titleList:[],
      dataList:[],
      myChart:null
    }
  },
  props:{
    color:{
      type:Array,
      default:()=>[]
    },
    barWidth:{
      type:Number,
      default:20
    },
    symbolSize:{
      type:Number,
      default:15
    },
    seriesName:{
      type:String,
      default:""
    },
    unit:{
      type:String,
      default:"分钟"
    },
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    barName:{
      type:Array,
      default:()=>[]
    },
    barData:{
      type:Array,
      default:()=>[]
    },
    splitLineShow:{
      type:Boolean,
      default:true
    },
    dataZoomShow:{
      type:Boolean,
      default:true
    },
    // data:{
    //   type:Object,
    //   default:()=>{}
    // }
  },
  watch:{
    barName:{
      handler(val){
        this.titleList = val;
      },
      deep:true,
      // immediate:true
    },
    barData:{
      handler(val){
        this.dataList = val;
        this.getEchart();
      },
      deep:true,
      // immediate:true
    }
  },
  mounted() {
  },

  methods: {
    getEchart() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != '' &&
        this.myChart != undefined
      ) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(this.$refs.bar) //创建echarts实例化对象
      this.myChart.clear() //清空画布数据
      var xAxisATT = this.titleList;
      var dataATT = this.dataList;
      var lineDataATT = []
      dataATT.forEach((v, i) => {
        lineDataATT.push({
          coords: [
            [i, 0],
            [i, v - 0.02]
          ]
        })
      })
      let end = xAxisATT.length >= 15 ?40:100
      let optionATT = {
        tooltip: {
          show: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter:function(params){
            var relVal = params[0].name;
            let value = params[0].value;
            if (params[0].value instanceof Array) {
              value = params[0].value[1];
            }
            relVal += '<br/>' + params[0].marker+_this.seriesName+'：' + (value?value:0) + _this.unit
            return relVal
          }
        },
        grid: {
          left: '10%',
          top: '4%',
          right: '2%',
          bottom: '11%'
        },
        xAxis: {
          data: xAxisATT,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick:{
            show:false
          },
        },
        yAxis: {
          splitLine: {
            show:this.splitLineShow,
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        },
        color: [this.color[0]],
        dataZoom:[
          {
            show:this.dataZoomShow,
            type: 'slider',
            realtime: true,
            start: 0,
            end: end,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          {
            type: 'bar',
            barWidth: this.barWidth,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.color[0]
                  },
                  {
                    offset: 1,
                    color: this.color[1]
                  }
                ]
              },
              barBorderRadius: [15, 15, 0, 0]
            },
            data: dataATT
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              show: true,
              period: 3,
              trailLength: 0.5,
              color: 'rgba(255, 255, 255, .2)',
              //symbol: 'rect',
              symbolSize: this.symbolSize
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0
              }
            },
            data: lineDataATT
          },
          
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              delay: 0.5,
              show: true,
              period: 2,
              trailLength: 0.5,
              color: 'rgba(255, 255, 255, .2)',
              //symbol: 'rect',
              symbolSize: this.symbolSize
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0
              }
            },
            data: lineDataATT
          }
        ]
      }

      this.myChart.setOption(optionATT);
      //点击全园班级柱状图进入班级睡眠详情
      this.myChart.on("click",function(data){
        if (data.data.classId) {
          let lifeData = {
            detailName:"睡眠",
            dateType:"week",
            show:false,
            stuSleepInfoShow:true,
            classId:data.data.classId
          }
          _this.$emit("lifeData",lifeData);
        }
      })
      let _this = this;
      window.addEventListener("resize", ()=>{
        _this.myChart.resize();
      })
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

</style>